import { Checkbox } from 'antd';
import MaterialItem from './Item';

import type { IMaterialInfoResponse } from '@/api/marterial';
import { memo } from 'react';
import './index.less';

type MaterialGroupProps = {
	value?: string[];
	showDelete?: boolean;
	showDetail?: boolean;
	materials?: IMaterialInfoResponse[];
	onDetail?: (material: IMaterialInfoResponse) => void;
	onDelete?: (material: IMaterialInfoResponse) => void;
	onChange?: (checkedValues: string[]) => void;
};

const MaterialGroup: React.FC<MaterialGroupProps> = props => {
	const { value = [], materials = [], onChange, ...rest } = props;
	return (
		<Checkbox.Group value={value} onChange={onChange} className="material-checkbox-group">
			{materials.map(material => (
				<Checkbox className="material-checkbox" value={material.doc_id} key={material.doc_id}>
					<MaterialItem material={material} {...rest} />
				</Checkbox>
			))}
		</Checkbox.Group>
	);
};
export default memo(MaterialGroup);
